<template>
  <view class="container">
    <!-- 表单 -->
    <view class="login-form">
      <!-- 商家账号 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="username" maxlength="20" placeholder="请输入商家账号" />
      </view>
      <!-- 登陆密码 -->
      <view class="form-item">
        <input class="form-item--input" type="password" v-model="password" maxlength="20" placeholder="请输入登录密码" />
      </view>
      <!-- 登录按钮 -->
      <view class="login-button" @click="handleLogin">
        <text>登录</text>
      </view>
	  <!-- 商家入驻 -->
      <!-- <view class="login-apply" @click="handleApply">
        <text>申请加盟</text>
      </view> -->
    </view>
  </view>
</template>

<script>
  import shop from '@/shop'
  import * as LoginApi from '@/apishop/login'
  import { throttle, debounce } from '@/utils-shop/util'
  import * as Verify from '@/utils-shop/verify'

  export default {
    props: {
      // 是否存在第三方用户信息
      isParty: {
        type: Boolean,
        default: () => false
      },
      // 第三方用户信息数据
      partyData: {
        type: Object
      }
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 账号
        username: 'admin',
		// 密码
        password: '123456',
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    created() {
    },

    methods: {

      // 验证商家账号
      validteAccount(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入商家账号')
          return false
        }
        return true
      },
	  
	  // 申请入驻
	  handleApply() {
		uni.navigateTo({
		url: "/pages/shop/apply/index"
		})
	  },
	  
	  // 表单验证
	  formValidation() {
	    const app = this
	    // 验证获取短信验证码
	    if (!app.validteAccount(app.username)) {
	      return false
	    }
		return true
	  },
	  
      // 点击登录
      handleLogin() {
        const app = this
        if (!app.isLoading && app.formValidation()) {
          app.submitLogin()
        }
      },

      // 确认登录
      submitLogin() {
        const app = this
        app.isLoading = true
        shop.dispatch('Login', {
            username: app.username,
            password: app.password
          })
          .then(result => {
            // 显示登录成功
            app.$toast(result.message)
            // 跳转回原页面
            setTimeout(() => {
              // app.onNavigateBack(1)
			  
			  uni.redirectTo({
			    url: "/pages/shop/index"
			  })
            }, 2000)
          })
          .catch(err => {
            if (err.result.data.isBack) {
              // 跳转回原页面
              setTimeout(() => {
                app.onNavigateBack(1)
              }, 2000)
            }
          })
          .finally(() => app.isLoading = false)
      },

      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta) {
        uni.navigateBack({
          delta: Number(delta || 1)
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 50rpx;

    .title {
      color: #191919;
      font-size: 50rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 25rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 25rpx;
    height: 96rpx;

    &--input {
      font-size: 26rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }
  }


  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 70rpx;
    // background: #cea26a;
    background: linear-gradient(to right, #ecb53c, #ff9211);
    text-align: center;
    line-height: 86rpx;
    color: #fff;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
  }

  .login-apply {
    width: 100%;
    height: 86rpx;
    margin-top: 70rpx;
    background: none;
    text-align: center;
    line-height: 86rpx;
    color: #000000;
    letter-spacing: 5rpx;
  }
  
</style>
